<template>
  <div class="lottery-record">
    <component :is="currentComponent" :winningNumbers="winningNumbers"></component>
    <div class="general">
      <div class="left">
        <span class="context">距<span class="date-no">{{winningNumbers.dateNo}}</span>期开奖</span>
        <span class="times time-countdown">
          <count-down :timeStamp="winningNumbers.drawTime" :fontSize="16"></count-down>
        </span>
      </div>
      <div class="right buy-now">
        <div class="btn hover-style button-selected" @click="handleClick">
          立即投注
        </div>
      </div>
    </div>
  </div> 
</template>

<script>
import WinningInfoSsc from '@/components/winning-info/winning-info-ssc'
import WinningInfoSc from '@/components/winning-info/winning-info-sc'
import WinningInfoKs from '@/components/winning-info/winning-info-ks'
import CountDown from '@/components/base/count-down/count-down'

export default {
  components: {
    WinningInfoSsc,
    WinningInfoSc,
    WinningInfoKs,
    CountDown
  },
  props: {
    winningNumbers: {
      type: Object,
      default: function() {
        return  {
          id: 3,
          lotteryName: '北京赛车',
          icon: '',
          numberInfo: {
            dateNo: '819048',
            numbers: '1,2,2,3,8,9,7',
            context:'大，小，单',
          },
          path: '/select-number/bjracer',
          drawTime: new Date().getTime() + 1000000
        }
      }
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      drawTime: '00:00:00',
      components: [
        'WinningInfoSsc', 
        'WinningInfoSc', 
        'WinningInfoSsc', 
        'WinningInfoKs',
        'WinningInfoSsc',
        'WinningInfoSsc'
      ],
    }
  },
  methods: {
    
    handleClick() {
      let path = this.winningNumbers.path 
      this.$router.push({path: path})
    }
  },
  computed: {
    currentComponent() {
      return this.components[this.activeIndex]
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .lottery-record
      align-items center
      background #fff
      .main
        flex 1
        display flex 
        align-items center
        justify-content space-between
        box-sizing border-box
      .general 
        display flex 
        align-items center
        .times 
          display flex 
          align-items center
        .times >>> .comma 
          margin-left -5px !important 
          margin-right -5px !important  
        .date-no 
          margin 0 5px
        .buy-now
          .btn 
            width 72px
            display flex 
            align-items center 
            justify-content center  
            padding 8px 0
            // box-sizing border-box
            // border 1px solid green 
</style>